<template>
  <v-data-iterator
      :items="info"
      :search="$store.state.search"
      :custom-filter="searchItems"
      no-results-text="暂无数据"
      loading="true"
      loading-text="这里空空如也"
      no-data-text="这里空空如也"
      :items-per-page.sync="itemsPerPage"
      :page.sync="page"
      hide-default-footer
  >
    <template v-slot:default="props">
<v-row>
  <v-col
  v-for="(n) in props.items"
  :key="n.title"
  class="d-flex child-flex"
  :cols="col"

  >
    <v-hover>
      <template v-slot:default="{ hover }">
    <v-card
        :class="`elevation-${hover ? 24 : 6}`"
        class="mx-auto pa-6 transition-swing"

    >
      <v-card-title >{{n.title}}</v-card-title>
      <v-card-subtitle class="grey--text">{{ n.date }}</v-card-subtitle>
      <v-card-actions>
        <v-btn :to="{name:'article',params:{title:n.title}}" dark>阅读</v-btn>
      </v-card-actions>
    </v-card>
      </template>
    </v-hover>
  </v-col>
</v-row>
    </template>

    <template v-slot:footer>
      <v-row
          class="ma-2"
          align="center"
          justify="center"
      >
        <span style="font-size: small" class="grey--text">展示个数</span>
        <v-menu offset-y>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
                dark
                text
                color="primary"
                class="ml-2"
                v-bind="attrs"
                v-on="on"
            >
              {{ itemsPerPage }}
              <v-icon>mdi-chevron-down</v-icon>
            </v-btn>
          </template>
          <v-list>
            <v-list-item
                v-for="(number, index) in itemsPerPageArray"
                :key="index"
                @click="updateItemsPerPage(number)"
            >
              <v-list-item-title>{{ number }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

        <v-spacer></v-spacer>

        <span
            style="font-size: small"
            class="mr-4
            grey--text
            "
        >
            当前 {{ page }}页 /共 {{ numberOfPages }}页
          </span>
        <div>
        <v-btn
            fab
            dark
            color="white"
            class="ma-1"
            small
            @click="formerPage"
        >
          <v-icon color="black">mdi-chevron-left</v-icon>
        </v-btn>
        <v-btn
            fab
            dark
            small
            color="white"
            class="ma-1"
            @click="nextPage"
        >
          <v-icon color="black">mdi-chevron-right</v-icon>
        </v-btn>
        </div>
      </v-row>
    </template>


  </v-data-iterator>
</template>

<script>
export default {
  name: "md-gallary",
  props:{
    catalog:{
      type:String,
      default:'test'
    }
  }
  ,
  data(){

    return{
      info:[],
      itemsPerPageArray: [3, 6, 8],
      page: 1,
      itemsPerPage: 6,
      col:4


    }
  },
  mounted() {
    // const modulesFiles = require.context('../assets', true, /.md$/)
    // const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    //   const moduleName = modulePath.replace(/^.\/(.*)\.md/,'$1')
    //   const value = modulesFiles(modulePath)
    //   modules[moduleName] = value.default
    //   return modules
    // }, {})
    // this.len = Object.keys(modules).length
    // Object.keys(modules).forEach((name)=>{
    //   var tmp = require('../assets/'+name+'.md')
    //   this.content.push(tmp)
    // })
    //
    // this.content.forEach((con)=>{
    //   var start = false
    //   var end =false
    //   var info = []
    //   var content = ""
    //   con.trim().split('\n').forEach((n,i)=>{
    //     console.log(i)
    //
    //     if(n.trim().toString() === '```' && start===false){
    //       start = true
    //     }
    //     else if(n.trim().toString() ==='```' && end ===false && start ===true){
    //       end = true
    //     }
    //     else if(start === true && end === false) {
    //       info.push(n)
    //     }
    //     else if(start ===true && end ===true){
    //       content=content+n+"\n";
    //     }
    //
    //   })
    //   this.cleanContext.push(content)
    //
    //   var key=[]
    //   var value=[]
    //   info.forEach((n)=>{
    //     var temp = n.split(':')
    //     key.push(temp[0].trim().toString())
    //     value.push(temp[1].trim().toString())
    //   })
    //
    //
    //   this.info.push(this.getnewarr(key,value))
    // })

    this.info = this.$store.state.info

    this.info = this.info.filter((i)=>{return i.catalog === this.catalog})

    this.col = this.$vuetify.breakpoint.width<600?12:4;
  },
  computed: {
    numberOfPages () {
      return Math.ceil(this.info.length / this.itemsPerPage)
    }
  },
  methods:{

    searchItems(items,search){

      if (!search) return items
      search = search.toString().toLowerCase()
      if (search.trim() === '') return items

      var o = items.filter((item) => item.title.includes(search))

      return o;
    },
    nextPage () {
      if (this.page + 1 <= this.numberOfPages) this.page += 1
    },
    formerPage () {
      if (this.page - 1 >= 1) this.page -= 1
    },
    updateItemsPerPage (number) {
      this.itemsPerPage = number
    },

  }
}

</script>

<style scoped>

</style>